<template>
	<view class="index mine">
		<view class="mine-header" @click="toInfo">
			<image
				class="mine-header-avatar"
				:src="userInfo.avatar"
				mode="widthFix"
			></image>
			<view class="mine-header-info">
				<view class="mine-header-info-nickname">
					{{ userInfo.nickname }}
				</view>
				<view class="mine-header-info-email">
					{{ userInfo.email }}
				</view>
			</view>
		</view>
		<view class="mine-function">
			<view class="mine-function-cell" @click="onClick">
				<view class="left">
					<uni-icons
						type="cart-filled"
						size="40"
						style="font-weight: bold; margin-right: 4px"
					></uni-icons>
					<text>我的订单</text>
				</view>
				<uni-icons type="right" size="26" color="#999"></uni-icons>
			</view>
			<view class="mine-function-cell" @click="onCopy">
				<view class="left">
					<uni-icons
						type="weixin"
						size="40"
						style="font-weight: bold; margin-right: 4px"
					></uni-icons>
					<text>专属微信客服</text>
				</view>
				<uni-icons type="right" size="26" color="#999"></uni-icons>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog
				class="mine-dialog"
				title="填写邮箱"
				before-close
				:show-close="false"
				@confirm="dialogInputConfirm"
			>
				<view class="mine-dialog-content">
					<uni-easyinput
						v-model="email"
						placeholder="请输入邮箱"
						style="margin-bottom: 8px"
					></uni-easyinput>
					<uni-easyinput
						v-model="email2"
						placeholder="请再次输入邮箱"
					></uni-easyinput>
					<uni-easyinput
						v-model="phoneNum"
						placeholder="请输入手机号"
					></uni-easyinput>
					<view class="mine-dialog-tip">
						邮箱将用于发送订单，请注意确认邮箱
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { update } from '../../api/user/index.js'
import { toast } from '../../utils/native/index.js'
export default {
	data() {
		return {
			email: '',
			email2: '',
			phoneNum: ''
		}
	},

	computed: {
		...mapState('user', ['userInfo'])
	},

	methods: {
		...mapMutations('user', ['setUserInfo']),
		...mapActions('user', ['login']),

		dialogInputConfirm() {
			const { email, email2, phoneNum } = this
			const { username } = this.userInfo
			if (!(email && email2)) {
				toast('请输入邮箱')
			} else if (!phoneNum) {
				toast('请输入手机号')
			} else if (email === email2) {
				this.$refs.inputDialog.close()
				update({ username, email, phoneNum }).then((data) => {
					console.log(data)
					this.setUserInfo(data)
				})
			} else {
				toast('两次输入的邮箱不一致')
			}
		},

		onClick() {
			uni.navigateTo({
				url: '/pages/mine/order/order'
			})
		},

		onCopy() {
			uni.setClipboardData({
				data: 'qiyadeng-com',
				success: function () {
					toast('已复制微信号，请前往微信搜索添加')
				}
			})
		},

		toInfo() {
			uni.navigateTo({
				url: '/pages/mine/info/info'
			})
		}
	},

	onShow() {
		this.login(() => {
			console.log('带你')
			uni.switchTab({
				url: '/pages/index/index'
			})
		}).then(() => {
			if (!this.userInfo.email) {
				this.$nextTick(() => {
					this.$refs.inputDialog.open()
				})
			}
		})
	}
}
</script>
<style lang="scss" scoped>
.mine {
	width: 100vw;
	padding: 0;
	background-color: #f5f5f5;

	&-header {
		padding: 16px;
		background-color: white;
		display: flex;

		&-avatar {
			width: 60px;
		}

		&-info {
			margin-left: 16px;
			word-break: break-all;

			&-nickname {
				color: #000;
				font-size: 18px;
				font-weight: 500;
			}

			&-email {
				color: #666;
				font-size: 12px;
			}
		}
	}

	&-function {
		margin-top: 20px;

		&-cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: white;
			padding: 8px;

			.left {
				display: flex;
				align-items: center;
				font-size: 16px;
			}
		}

		&-cell + &-cell {
			margin-top: 1px;
		}
	}

	&-dialog {
		&-content {
			width: 100%;
		}

		&-tip {
			color: crimson;
			font-size: 12px;
			margin-top: 16px;
		}
	}
}
</style>
